<template>
  <div class="logo w-32">
    <v-img src="@/images/logo.png"></v-img>
  </div>

  <h1 class="text-lg text-gray-900">{{ text }}</h1>
  <p class="text-red-500" v-text="num"></p>
  <button
    class="w-20 h-9 bg-red-600 text-white rounded-md sm:bg-yellow-500 md:bg-green-500 lg:bg-indigo-800"
    @click="num += 1"
  >
    click me
  </button>
</template>

<script setup>
import { ref, defineProps, onMounted } from "vue";
const num = ref(0);
/**
 * props
 */
const { text } = defineProps({
  text: {
    default: "hello",
    type: String,
  },
});

/**
 * emits
 */
const emits = defineEmits(['on-init']);

onMounted(() => {
  emits("on-init", text);
});

/**
 * css 变量
 */
const fontSize = ref("24px");
</script>

<style lang='scss' scoped>
.text-lg {
  font-size: v-bind(fontSize);
}
</style>